<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="../css/search.css">
    <script src="../js/cookie.js"></script>
    <script src="../js/ajax.js"></script>
    <style>
        * {
            padding: 0;
            margin: 0;
        }

        .w {
            width: 1200px;
            margin: 0 auto;
        }

        .nav {
            width: 1200px;
            margin: 0 auto;
        }

        a {
            color: inherit;
            text-decoration: none;
        }

        .tips a {
            font-size: 14px;
        }

        .wrapTable table {
            width: 100%;
            line-height: 45px;
            border-collapse: collapse;
            text-align: center;
            table-layout: fixed;
        }

        .wrapTable table,
        .wrapTable th,
        .wrapTable td {
            border: 1px solid #000;
        }
    </style>
</head>

<body>
    <div class="nav w">
        <div class="tips">
            <a href="./login.html">你好,请登录</a>
            <a href="./register.html">用户注册</a>
        </div>
    </div>

    <div class="wrapTable w">
        <form class="search_bar" onsubmit="return false">
            <div class="searchBox">
                <input type="text" class="searchCon">
                <button class="searchBtn">搜索</button>
            </div>
            <div class="orderBox">
                <!-- 排序的列(column)名 (id,chinese,math,english,total) -->
                <div class="orderColBox">
                    <label>
                        学号
                        <input type="radio" checked="" name="orderCol" class="orderCol" value="id">
                    </label>
                    <label>
                        语文
                        <input type="radio" name="orderCol" class="orderCol" value="chinese">
                    </label>
                    <label>
                        数学
                        <input type="radio" name="orderCol" class="orderCol" value="math">
                    </label>
                    <label>
                        英语
                        <input type="radio" name="orderCol" class="orderCol" value="english">
                    </label>
                    <label>
                        总分
                        <input type="radio" name="orderCol" class="orderCol" value="total">
                    </label>
                </div>
                <!-- 排序的类型  升序 / 降序 -->
                <div class="orderTypeBox">
                    <label>
                        升序
                        <input type="radio" checked="" name="orderType" class="orderType" value="asc">
                    </label>
                    <label>
                        降序
                        <input type="radio" name="orderType" class="orderType" value="desc">
                    </label>
                </div>
                <div class="showNumBox">
                    <select class="select">
                        <option value="5" selected="">每页显示05条</option>
                        <option value="10">每页显示10条</option>
                        <option value="15">每页显示15条</option>
                        <option value="20">每页显示20条</option>
                    </select>
                </div>
                <input type="reset" class="resetBtn" value="重置">
            </div>
        </form>
        <table>
            <thead>
                <tr>
                    <th>编号</th>
                    <th>姓名</th>
                    <th>班级</th>
                    <th>语文</th>
                    <th>数学</th>
                    <th>英语</th>
                    <th>总分</th>
                    <th>编辑</th>
                    <th>删除</th>
                </tr>
            </thead>
            <tbody>
                <!-- <tr>
                    <td>1</td>
                    <td>张三</td>
                    <td>2103</td>
                    <td>55</td>
                    <td>66</td>
                    <td>77</td>
                    <td>198</td>
                    <td><a href="javascript:;" class="edit">编辑</a></td>
                    <td><a href="javascript:;" class="del">删除</a></td>
                </tr> -->
            </tbody>
        </table>
        <div class="pageBox">
            <button class="prev">上一页</button>
            <span class="pageTips">1/14</span>
            <button class="next">下一页</button>
        </div>
    </div>

    <div class="shadow">
        <form class="detail" action="" autocomplete="off" onsubmit="return false">
            <p><label>编号:<input type="text" name="id" disabled></label></p>
            <p><label>姓名:<input type="text" name="name" disabled></label></p>
            <p><label>班级:<input type="text" name="class" disabled></label></p>
            <p><label>语文:<input type="text" name="chinese"></label></p>
            <p><label>数学:<input type="text" name="math"></label></p>
            <p><label>英语:<input type="text" name="english"></label></p>
            <p>
                <button class="subBtn">确定</button>
                <input class="canBtn" type="reset" value="取消">
            </p>
        </form>
    </div>

</body>
<script>
    var tips = document.getElementsByClassName("tips")[0];
    var tbody = document.querySelector(".wrapTable tbody");
    var shadow = document.querySelector(".shadow");

    var form = document.querySelector(".shadow form");
    var idInp = document.getElementsByName("id")[0];  // form.id
    var nameInp = document.getElementsByName("name")[0];
    var classInp = document.getElementsByName("class")[0];
    var chineseInp = document.getElementsByName("chinese")[0];
    var mathInp = document.getElementsByName("math")[0];
    var englishInp = document.getElementsByName("english")[0];

    var subBtn = document.querySelector(".subBtn");
    var canBtn = document.querySelector(".canBtn");
    var search_bar = document.querySelector(".search_bar");
    var searchCon = document.querySelector(".searchCon");

    // 创建变量 记录参数的默认值  , 当数据改变时只需重新赋值 
    var key = "";   // 默认查询所有
    var orderCol = "id";  // 默认按id排序
    var orderType = "asc"; // 默认升序

    // 标识用户身份  如果用户已登录 => 显示 欢迎,xxx
    if (getCookie("lgc")) {
        tips.innerHTML = "欢迎您," + getCookie("lgc") + "<button onclick='exit()'>退出</button>";
        // var btn = tips.querySelector("button");
    }

    // 页面加载时 请求所有成绩并渲染
    loadGrade();
    function loadGrade() {
        ajax({
            type: "get",
            url: "../php/searchOrder.php",
            data: { key, orderCol, orderType },
            dataType: "json",
            success: function (result) {
                var { status, detail, list } = result;
                if (status) {
                    var html = "";
                    list.forEach(({ id, name, class: _class, chinese, math, english, total }) => {
                        html += `<tr data-id="${id}">
                        <td>${id}</td>
                        <td>${name}</td>
                        <td>${_class}</td>
                        <td>${chinese}</td>
                        <td>${math}</td>
                        <td>${english}</td>
                        <td>${total}</td>
                        <td><a href="javascript:;" class="edit">编辑</a></td>
                        <td><a href="javascript:;" class="del">删除</a></td>
                    </tr>`
                    })
                    tbody.innerHTML = html;
                } else {
                    tbody.innerHTML = `<tr><td colspan="9">暂无数据</td></tr>`;
                }

                // ajax绑定事件
                // (1) 生成之后获取元素绑定事件
                // (2) 事件委托
            }
        })


    }

    tbody.onclick = function (e) {
        var e = e || window.event;
        var target = e.target || e.srcElement;
        if (target.className == "del") {
            console.log(target);

            // DOM删除
            // tr.remove();
            if (confirm("是否删除该成绩")) {
                var tr = target.parentElement.parentElement;
                var id = tr.getAttribute("data-id");
                console.log(id);

                // 根据id删除
                var xhr = new XMLHttpRequest();

                xhr.open("get", "../php/deleteGradeById.php?id=" + id, true);

                xhr.send();

                xhr.onreadystatechange = function () {
                    if (xhr.readyState == 4 && xhr.status == 200) {
                        var result = JSON.parse(xhr.responseText);
                        console.log(result);
                        var { status, detail } = result;
                        if (status) {
                            tr.remove();
                        } else {
                            alert(detail);
                        }

                    }
                }
            }
        } else if (target.className == "edit") {
            shadow.style.display = "block";

            // 点击编辑 根据id找到数据 渲染到form
            var tr = target.parentElement.parentElement;
            var id = tr.getAttribute("data-id");
            console.log(id);

            // 根据id找到数据
            var xhr = new XMLHttpRequest();

            xhr.open("get", "../php/searchGradeById.php?id=" + id, true);

            xhr.send();

            xhr.onreadystatechange = function () {
                if (xhr.readyState == 4 && xhr.status == 200) {
                    var result = JSON.parse(xhr.responseText);
                    console.log(result);
                    var { status, detail, data } = result;
                    if (status) {
                        idInp.value = data.id;
                        nameInp.value = data.name;
                        classInp.value = data.class;
                        chineseInp.value = data.chinese;
                        mathInp.value = data.math;
                        englishInp.value = data.english;
                    } else {
                        alert(detail);
                    }


                }
            }


        }
    }

    subBtn.onclick = function () {
        // 编辑之后 点击确定按钮  => 保存到数据库
        var id = idInp.value;
        var chinese = chineseInp.value;
        var math = mathInp.value;
        var english = englishInp.value;

        var xhr = new XMLHttpRequest();

        xhr.open("post", "../php/updateGradeById.php", true);

        xhr.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
        xhr.send(`id=${id}&chinese=${chinese}&math=${math}&english=${english}`);

        xhr.onreadystatechange = function () {
            if (xhr.readyState == 4 && xhr.status == 200) {
                var result = JSON.parse(xhr.responseText);
                console.log(result);
                var { status, detail } = result;
                if (status) {
                    shadow.style.display = "none";
                    // location.reload();
                    loadGrade();
                } else {
                    alert(detail);
                }
            }
        }

    }


    search_bar.onclick = function (e) {
        var e = e || window.event;
        var target = e.target || e.srcElement;
        if (target.className == "searchBtn") {  //点击了搜索
            var searchCon = this.querySelector(".searchCon");  // this ->  search_bar
            key = searchCon.value;
            console.log(key);
            loadGrade();
        } else if (target.className == "orderCol") {
            orderCol = target.value;
            console.log(target, orderCol);
            loadGrade();

        } else if (target.className == "orderType") {
            orderType = target.value;
            console.log(target, orderType);

            loadGrade();
        }
    }

    canBtn.onclick = function () {
        shadow.style.display = "none";
        // idInp.value = "";
    }



















    function exit() {
        delCookie("lgc");
        location.reload();
    }
</script>

</html>